<template>
	<view class="newsCon">
		<u-navbar :fixed="false" :titleStyle="{ color: '#000' }"   bgColor="#fff"
			  title="消息"></u-navbar>
		<scroll-view class="scroll-con" style="height: 100vh" scroll-y="true" @scrolltolower="loadmore">
			<view class="list" v-if="list && list.length>0">
				<view class="item" v-for="(item ,index) in list" :key="index">
					<view class="title">{{item.createTime}}</view>
					<view class="sub-item" @click="toDetailitem(item)">
						<view class="item-img">
							<view class="img">
								<image src="../../../static/image/news.png"></image>
							</view>
							<view class="img-right">
								<view class="item-title">{{item.title}}</view>
								<!-- app推送类型: 100船舶保养maintainAlarmData/200证书过期cerData/300库存下限stockData/400维修工单fixOrderData/500保养工单maintainOrderData/600领用工单reqOrderData/700请购工单 purchaseOrderData-->
								<view class="sub-list" v-if="item.param.notifyType===100">
									<view class="sub-tip" v-if="item.param.maintainAlarmData.boatName">
										{{item.param.maintainAlarmData.boatName}}
									</view>
									<view class="sub-tip" v-if="item.param.maintainAlarmData.maintainTypeName">
										{{item.param.maintainAlarmData.maintainTypeName}}
									</view>
								</view>
								<view class="sub-list" v-if="item.param.notifyType===200">
									<view class="sub-tip" v-if="item.param.cerData.boatName">
										{{item.param.cerData.boatName}}
									</view>
									<view class="sub-tip" v-if="item.param.cerData.alarmName">
										{{item.param.cerData.alarmName}}
									</view>
								</view>
								<view class="sub-list" v-if="item.param.notifyType===400">
									<view class="sub-tip" v-if="item.param.fixOrderData.boatName">
										{{item.param.fixOrderData.boatName}}
									</view>
									<view class="sub-tip" v-if="item.param.fixOrderData.fixTypeName">
										{{item.param.fixOrderData.fixTypeName}}
									</view>
								</view>
								<view class="sub-list" v-if="item.param.notifyType===500">
									<view class="sub-tip" v-if="item.param.maintainOrderData.boatName">
										{{item.param.maintainOrderData.boatName}}
									</view>
									<view class="sub-tip" v-if="item.param.maintainOrderData.maintainTypeName">
										{{item.param.maintainOrderData.maintainTypeName}}
									</view>
								</view>
								<view class="sub-list" v-if="item.param.notifyType===600">
									<view class="sub-tip" v-if="item.param.reqOrderData.deptName">
										{{item.param.reqOrderData.deptName}}
									</view>
									<view class="sub-tip" v-if="item.param.reqOrderData.amount">
										{{item.param.reqOrderData.amount}} 元
									</view>

								</view>
								<view class="sub-list" v-if="item.param.notifyType===700">
									<view class="sub-tip" v-if="item.param.purchaseOrderData.boatName">
										{{item.param.purchaseOrderData.boatName}}
									</view>
									<view class="sub-tip" v-if="item.param.purchaseOrderData.deptName">
										{{item.param.purchaseOrderData.deptName}}
									</view>
									<view class="sub-tip" v-if="item.param.purchaseOrderData.amount">
										{{item.param.purchaseOrderData.amount}} 元
									</view>
								</view>
							</view>
						</view>
						<view class="item-con">{{item.content}}</view>
					</view>
				</view>
			</view>
			<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../../static/image/list-no-data.png"
				class="nodata"></u-empty>

		</scroll-view>
	</view>
</template>

<script>
	import {
		queryUserMessageBoxList
	} from '@/api/news.js'
	export default {
		data() {
			return {
				status: 'loadmore',
				list: [],
				params: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
			}
		},

		onShow() {
			this.params.pageNum = 1
			this.list = []
			this.getList()
		},
		methods: {
			toDetailitem(item) {
				const type = item.param.notifyType

				let url = ''
				// app推送类型: 100船舶保养maintainAlarmData/200证书过期cerData/300库存下限stockData/400维修工单fixOrderData/500保养工单maintainOrderData/600领用工单reqOrderData/700请购工单 purchaseOrderData
				// 500保养工单maintainOrderData/600领用工单reqOrderData/700请购工单 purchaseOrderData
				if (type === 100) {
					const data = item.param.maintainAlarmData
					//船舶保养
					url = '/subMaintenance/maintain/add?boatId=' + data.boatId + '&boatName=' + data.boatName +
						'&maintainTypeName=' + data.maintainTypeName
				} else if (type === 400) {
					//维修工单
					const id = item.param.fixOrderData.id
					url = '/subMaintenance/repair/detail?id=' + id
				} else if (type === 500) {
					const id = item.param.maintainOrderData.id
					//保养工单
					url = '/subMaintenance/maintain/detail?id=' + id
				} else if (type === 600) {
					//领用工单
					const id = item.param.reqOrderData.id
					url = '/subMaintenance/requisition/detail?id=' + id
				} else if (type === 700) {
					//请购工单
					const id = item.param.purchaseOrderData.id
					url = '/subMaintenance/purchase/detail?id=' + id
				} else {
					return
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				}


			},
			getList() {
				this.status = 'loading';
				uni.showLoading({
					title: '加载中'
				})
				queryUserMessageBoxList(this.params).then(res => {
					const {
						total,
						rows
					} = res
					if (rows && rows.length > 0) {
						this.list = [...this.list, ...rows]
					}
					this.total = total
					if (total === 0) {
						this.status = 'nomore'
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			loadmore() {

				if (this.list.length >= this.total) {
					this.status = 'nomore'
					return
				}
				this.params.pageNum = this.params.pageNum + 1
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newsCon {
		background: #F5F7F9;
		height: 100vh;
		overflow: hidden;
		
		 
		.list {
			padding: 30rpx;
			.item {
				margin-bottom: 30rpx;

				.title {
					margin: 0 auto;
					width: 270rpx;
					height: 50rpx;
					background: #DCE0E7;
					border-radius: 30rpx;
					text-align: center;
					line-height: 50rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #FFFFFF;

				}

				.sub-item {
					margin: 20rpx 0;
					width: 690rpx;
					height: 240rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					padding: 30rpx;
					box-sizing: border-box;

					.item-img {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						.img {
							width: 90rpx;
							height: 90rpx;
							margin-right: 20rpx;

							image {
								width: 90rpx;
								height: 90rpx;
							}
						}

						.img-right {
							.item-title {
								font-size: 30rpx;
								font-weight: 500;
								color: #323232;
							}

							.sub-list {
								display: flex;

								.sub-tip {
									min-width: 110rpx;
									height: 38rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									background: rgba(54, 133, 230, 0.1);
									border-radius: 4rpx;
									margin-right: 16rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #3685E6;
								}

							}
						}
					}

					.item-con {
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 37rpx;
					}
				}
			}
		}
	}
</style>
